<template>
  <nav class="navbar">
    <h1>Vue 导航栏</h1>
    <ul>
      <li><a href="#" class="nav-link">首页</a></li>
      <li><a href="#" class="nav-link">组件</a></li>
    </ul>
  </nav>
</template>

<script setup>
// 必须有 <script setup> 标签
</script>

<style>
.navbar {
  background-color: #2c3e50;
  color: rgb(113, 81, 201);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.nav-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
}
.nav-link:hover {
  text-decoration: underline;
}
</style>